<template lang="pug">
  .left-menu(:style="{height: winHeight - 50 + 'px'}")
    .menu-content
      .menu-item(v-for="menuGroup in menuInfoVoList")
        .menu-group(@click="openMenu(menuGroup)")
          i.iconfont(:class="menuGroup.menuIcon")
          .menu-group-name {{menuGroup.menuName}}
          i.iconfont.icon-zhankai(:class="menuGroup.showMenu ? 'transform-zhankai' : ''")
        .menu(v-for="menu in menuGroup.menuInfoList", v-if="menuGroup.showMenu", :key="menu.menuId")
          .menu-line(@click="toMenu(menu)")
            .menu-name {{menu.menuName}}
          .child(v-for="child in menu.children")
            .child-line(@click="toChild(child)")
              .child-name {{child.menuName}}

</template>

<script>
import {get} from '@utils/util'
export default {
  data () {
    return {
      menuInfoVoList: [
        {
          menuName: '系统设置',
          menuInfoList: [{
            menuName:'全局设置',
            path:'/sysSetting'
          },
          {
            menuName:'组织架构',
            children: [{
              menuName: '组织类型管理',
              path:''
            }],
            defaultProps: {
              children: 'children',
              menuName: 'menuName'
            }
          },
          {
            menuName:'基础设置',
            path:''
          },
          {
            menuName:'资源管理',
            path:''
          },
          {
            menuName:'权限设置',
            path:''
          }]
        },
        {
          menuName: '日志审计',
          menuInfoList: [{
            menuName:'登录审计',
            path:'/sysSetting'
          }]
        },
        {
          menuName: '基础数据',
          menuInfoList: [{
            menuName:'车棚(充电站)信息',
            path:'/sysSetting'
          },
          {
            menuName:'充电桩信息',
            path:'/user'
          },
          {
            menuName:'摄像头信息',
            path:''
          },
          {
            menuName:'门禁信息',
            path:''
          }]
        },
        {
          menuName: '用户管理',
          menuInfoList: [{
            menuName:'用户信息',
            path:'/sysSetting'
          },
          {
            menuName:'门禁卡号管理',
            path:'/user'
          },
          {
            menuName:'充电卡号管理',
            path:''
          }]
        },
        {
          menuName: '经营管理',
          menuInfoList: [{
            menuName:'充电费率设置',
            path:'/sysSetting'
          },
          {
            menuName:'停车费率设置',
            path:'/user'
          },
          {
            menuName:'充值查询',
            path:''
          },
          {
            menuName:'消费查询',
            path:''
          },
          {
            menuName:'进出门记录',
            path:''
          }]
        },
        {
          menuName: '远程操控',
          menuInfoList: [{
            menuName:'充电桩监控',
            path:'/sysSetting'
          },
          {
            menuName:'远程开门',
            path:'/user'
          },
          {
            menuName:'现场监视',
            path:''
          },
          {
            menuName:'远程充电',
            path:''
          },
          {
            menuName:'充电桩指令下发',
            path:''
          },
          {
            menuName:'门禁卡号下发',
            path:''
          },
          {
            menuName:'充电卡号下发',
            path:''
          },
          {
            menuName:'门禁与卡号记录',
            path:''
          }]
        },
        {
          menuName: '实时监控',
          menuInfoList: [{
            menuName:'大屏展示',
            path:'/sysSetting'
          }]
        },
        {
          menuName: '辅助决策',
          menuInfoList: [{
            menuName:'运营分析',
            path:'/sysSetting'
          },
          {
            menuName:'能耗报表',
            path:'/user'
          },
          {
            menuName:'收益查询',
            path:''
          }]
        }
      ]
    }
  },
  methods: {
    toMenu (menu) {
      let ok = true
      this.$router.push(menu.path)
    },
    openMenu (menuGroup) {
      let showMenu = menuGroup.showMenu
      this.menuInfoVoList.forEach(x => {
        x.showMenu = false
      })
      menuGroup.showMenu = !showMenu
      this.menuInfoVoList.push()
    },
    async init () {
      // const {data} = (await this.$http.post('/manage/menu-group/init-menu')).data
      // this.menuInfoVoList = data
    },
    toChild (child) {
      this.$router.push(child.path)
    },
  },
  computed: {
    winHeight: get('base/winHeight'),
    menuFlush: get('base/menuFlush')
  },
  watch: {
    menuFlush (val) {
      if (val) {
        this.init()
        this.$store.set('base/menuFlush', false)
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped lang="stylus">
  .left-menu
    width 250px
    background-color #FBFBFB
    // color #a7a7a7
    color #575765
  .menu-item
    cursor pointer
  .menu-group
    display flex
    height 50px
    line-height 50px
    &:hover
      background-color #EEEEEE
      color black
    i:first-child
      font-size 20px
      width 34px
  .menu-group-name
    width calc(100% - 50px)
    font-size 15px
  .menu
    height 40px
    line-height 40px
    font-size 15px
    &:hover
      background-color #3498DB
      color #298adb
  .menu-line
    background-color #FBFBFB
  .menu-name
    padding-left 34px
  .child
    height 40px
    line-height 40px

  .transform-zhankai
    transition 0.5s
    transform rotate(90deg)
    -ms-transform rotate(90deg)
    -moz-transform rotate(90deg)
    -webkit-transform rotate(90deg)
    -o-transform rotate(90deg)
  .transform-guanbi
    transition 0.5s
    transform rotate(-90deg)
    -ms-transform rotate(-90deg)
    -moz-transform rotate(-90deg)
    -webkit-transform rotate(-90deg)
    -o-transform rotate(-90deg)
</style>
